<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>weui-button</title>
    <link rel="stylesheet" href="./btn.css">
</head>
<body>
   <!-- html 结构 由外到内，从上到下 -->
   <!-- 取类名是个技术话，从大厂学习一些词汇
     1.page结构命名套路
     2.__bem国际命名规范
     3. page block 兴起一个区块
     4. page_hd 子元素 ELement
     5. 组件命名 btn 可以复用的按钮组件 weui? 
       项目名或公司名作为前缀 .btn 新的一个block
       .weui-messagebox>.weui-messagebox_hd{弹窗标题}+.weui-message_bd+p{}+.weui_message_ft>weui-btn*2
 -->

 <div class="page">
     <div class="page_hd">
         <h1 class="page_title">button</h1>
         <p class="page_desc">按钮</p>
     </div>
     <div class="page_bd">
         <div class="button-sp-area">
             <!-- 状态下css类名里 
            BEM Block Element Modifier
        weui-btn 按钮基础类，再加状态类-->
         <a href="javascript:;" class="weui-btn weui-btn__primary">主要操作</a>
         <a href="javascript:;" class="weui-btn weui-btn__deafult">次要操作</a>
         <a href="javascript:;" disabled class="weui-btn weui-btn__disabled">禁用</a>
     </div></div>
     <!-- <div class="page_ft"></div> -->
 </div>
</body>
</html>